<template>
  <div>
    <el-card>
      <div class="noptice-header flex items-center justify-between mb-5">
        <el-button type="primary" size="small" @click="createClick"
          >新增</el-button
        >
        <el-button type="primary" size="small">
          <el-icon>
            <Refresh />
          </el-icon>
        </el-button>
      </div>
      <div>
        <el-tree
          :data="tableList"
          :props="{
            children: 'child',
            label: 'name',
          }"
        >
          <template #default="{ node, data }">
            <span>{{ data.name }}</span>
            <div class="ml-auto">
              <el-button type="primary" text @click.stop="recommend(data)"
                >推荐产品</el-button
              >
              <el-switch
                v-model="data.status"
                :active-value="1"
                :inactive-value="0"
                @change="statusChange(data)"
              />
              <el-button type="primary" text @click.stop="editNoticeClick(data)"
                >修改</el-button
              >

              <el-button type="primary" text @click="handleDelete(data.id)"
                >删除</el-button
              >
            </div>
          </template>
        </el-tree>
      </div>
    </el-card>

    <Drawer
      ref="DrawerRef"
      :title="title === 'add' ? '添加分类' : '修改分类'"
      @submit="submit"
    >
      <el-form ref="formRef" :model="fromData" label-width="100px">
        <el-form-item label="分类名称" prop="username">
          <el-input v-model="fromData.name" placeholder="请输入分类名称" />
        </el-form-item>
      </el-form>
    </Drawer>
    <categoryDraw ref="categoryDrawRef"></categoryDraw>
  </div>
</template>
<script setup>
import { ref } from "vue";
import Drawer from "@/components/Drawer/index.vue";
import categoryDraw from "./components/categoryDraw.vue";
import {
  getCategoryList,
  addCategory,
  delCategory,
  editCategory,
  changStatus,
} from "@/api/category.js";
import { useInitTable, useInitForm } from "@/composables/useCommon.js";

const { tableList, getData, handleDelete, statusChange } = useInitTable({
  getList: getCategoryList,
  del: delCategory,
  status: changStatus,
  onGetListSuccess: (res) => {
    tableList.value = res.data;
  },
});

const {
  fromData,
  editId,
  rules,
  title,
  formRef,
  DrawerRef,
  createClick,
  submit,
  editNoticeClick,
} = useInitForm({
  fromData: {
    name: "", // 菜单/权限名称
  },
  create: addCategory,
  updata: editCategory,
  getData: getData,
});

const addrule = (id) => {
  createClick();
  fromData.rule_id = id;
};
// 推荐产品
const categoryDrawRef = ref();
const recommend = (data) => {
  categoryDrawRef.value.open(data);
};
</script>

<style>
.el-tree-node__content {
  padding: 20px 0;
}
</style>
